<script setup>

defineOptions({
  name: "InterfaceInfoAnalysis"
});

import { getCurrentInstance, onMounted, ref } from "vue";
import * as echarts from "echarts";
import {
  getInterfaceInfoAnalysis
} from "@/api/interfaceInfo";


const getECData = async () => {
  const data = await getInterfaceInfoAnalysis();
  const chartData = data.data.map(item => {
    return {
      value: item.totalNum,
      name: item.name
    }
  })
  var option = {
    title: {
      text: '接口调用次数最多的接口TOP3',
      left: 'center'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: '50%',
        data: chartData,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };
  var myChart = echarts.init(document.getElementById('main'));
  myChart.setOption(option);
};

onMounted(() => {
  getECData();
});

</script>

<template>
  <div>
    <div id="main" style="width: 600px;height:400px;"></div>
  </div>
</template>

<style scoped>

</style>
